<template>
  <div class="app-container">
    <!-- 头部搜索区域 -->
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="名称" prop="name">
        <el-input
          v-model="queryParams.name"
          placeholder="请输入名称"
          clearable
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="cn" prop="cn">
        <el-input
          v-model="queryParams.cn"
          placeholder="请输入cn"
          clearable
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="领域" prop="domain">
        <el-select v-model="queryParams.domain" placeholder="请选择领域" clearable>
          <el-option
            v-for="item in domainOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-plus" size="mini" @click="handleAdd">添加</el-button>
      </el-form-item>
    </el-form>

    <!-- 卡片展示区域 -->
    <div v-loading="loading" class="coser-card-container">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" v-for="item in coserList" :key="item.id" class="coser-card-col">
          <div class="coser-card" @click="handleCardClick(item)">
            <!-- 背景图片 -->
            <div class="card-background">
              <img :src="item.avatar || '/assets/default-avatar.png'" :alt="item.nickname" class="background-img">
              <div class="background-overlay"></div>
            </div>
            
            <!-- 卡片内容层 -->
            <div class="card-content-layer">
              <!-- 卡片头部：头像和评分 -->
              <div class="card-header">
                <div class="avatar-section">
                  <img :src="item.avatar || '/assets/default-avatar.png'" :alt="item.nickname" class="avatar-img">
                </div>
                <div class="rating-badge">
                  <el-rate
                    v-model="item.rating"
                    disabled
                    text-color="#ff9900"
                    show-score
                    score-template="{value}">
                  </el-rate>
                </div>
              </div>
              
              <!-- 卡片内容：用户基础信息 -->
              <div class="card-content">
                <div class="info-item">
                  <span class="label">昵称：</span>
                  <span class="value">{{ item.nickname }}</span>
                </div>
                <div class="info-item">
                  <span class="label">类型：</span>
                  <span class="value">{{ item.type }}</span>
                </div>
                <div class="info-item">
                  <span class="label">年龄：</span>
                  <span class="value">{{ item.age || '未知（永远年轻）' }}</span>
                </div>
                <div class="info-item">
                  <span class="label">生日：</span>
                  <span class="value">{{ item.birthday }}</span>
                </div>
                <div class="info-item">
                  <span class="label">所在地：</span>
                  <span class="value">{{ item.location }}</span>
                </div>
                <div class="info-item">
                  <span class="label">星座：</span>
                  <span class="value">{{ item.zodiac }}</span>
                </div>
                <div class="info-item">
                  <span class="label">擅长领域：</span>
                  <span class="value">{{ item.expertise }}</span>
                </div>
                <div class="info-item">
                  <span class="label">风格标签：</span>
                  <div class="tags-container">
                    <el-tag v-for="tag in item.tags" :key="tag" size="mini" type="info">{{ tag }}</el-tag>
                  </div>
                </div>
                <div class="info-item">
                  <span class="label">相关作品IP：</span>
                  <span class="value">{{ item.relatedWorks }}</span>
                </div>
              </div>
              
              <!-- 卡片底部：操作按钮 -->
              <div class="card-footer">
                <el-button size="mini" type="text" @click="handleDetail(item)">详情</el-button>
                <el-button size="mini" type="text" @click="handleUpdate(item)">修改</el-button>
                <el-button size="mini" type="text" style="color: #f56c6c" @click="handleDelete(item)">删除</el-button>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 分页组件 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加/修改对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="昵称" prop="nickname">
              <el-input v-model="form.nickname" placeholder="请输入昵称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="cn" prop="cn">
              <el-input v-model="form.cn" placeholder="请输入cn" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="类型" prop="type">
              <el-input v-model="form.type" placeholder="请输入类型" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="年龄" prop="age">
              <el-input v-model="form.age" placeholder="请输入年龄" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="生日" prop="birthday">
              <el-date-picker
                v-model="form.birthday"
                type="date"
                placeholder="选择生日"
                value-format="yyyy.MM.dd"
                style="width: 100%">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所在地" prop="location">
              <el-input v-model="form.location" placeholder="请输入所在地" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="星座" prop="zodiac">
              <el-select v-model="form.zodiac" placeholder="请选择星座" style="width: 100%">
                <el-option
                  v-for="item in zodiacOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="领域" prop="domain">
              <el-select v-model="form.domain" placeholder="请选择领域" style="width: 100%">
                <el-option
                  v-for="item in domainOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="擅长领域" prop="expertise">
          <el-input v-model="form.expertise" type="textarea" placeholder="请输入擅长领域" />
        </el-form-item>
        <el-form-item label="风格标签" prop="tags">
          <el-input v-model="tagInput" placeholder="输入标签后按回车添加" @keyup.enter.native="addTag">
            <template slot="append">
              <el-button @click="addTag">添加</el-button>
            </template>
          </el-input>
          <div class="tag-list" v-if="form.tags && form.tags.length > 0">
            <el-tag
              v-for="(tag, index) in form.tags"
              :key="index"
              closable
              @close="removeTag(index)"
              style="margin: 5px 5px 0 0">
              {{ tag }}
            </el-tag>
          </div>
        </el-form-item>
        <el-form-item label="相关作品IP" prop="relatedWorks">
          <el-input v-model="form.relatedWorks" placeholder="请输入相关作品IP" />
        </el-form-item>
        <el-form-item label="头像" prop="avatar">
          <el-upload
            class="avatar-uploader"
            action=""
            :show-file-list="false"
            :before-upload="beforeAvatarUpload">
            <img v-if="form.avatar" :src="form.avatar" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="评分" prop="rating">
          <el-rate v-model="form.rating" show-text></el-rate>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 详情对话框 -->
    <el-dialog title="Coser详情" :visible.sync="detailOpen" width="800px" append-to-body>
      <div class="detail-container" v-if="currentCoser">
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="avatar-section-detail">
              <img :src="currentCoser.avatar || '/assets/default-avatar.png'" :alt="currentCoser.nickname" class="detail-avatar">
              <div class="rating-detail">
                <el-rate
                  v-model="currentCoser.rating"
                  disabled
                  text-color="#ff9900"
                  show-score
                  score-template="{value}">
                </el-rate>
              </div>
            </div>
          </el-col>
          <el-col :span="16">
            <div class="info-detail">
              <h2>{{ currentCoser.nickname }} ({{ currentCoser.cn }})</h2>
              <p><strong>类型：</strong>{{ currentCoser.type }}</p>
              <p><strong>年龄：</strong>{{ currentCoser.age || '未知（永远年轻）' }}</p>
              <p><strong>生日：</strong>{{ currentCoser.birthday }}</p>
              <p><strong>所在地：</strong>{{ currentCoser.location }}</p>
              <p><strong>星座：</strong>{{ currentCoser.zodiac }}</p>
              <p><strong>擅长领域：</strong>{{ currentCoser.expertise }}</p>
              <p><strong>风格标签：</strong>
                <el-tag v-for="tag in currentCoser.tags" :key="tag" size="small" style="margin: 2px">{{ tag }}</el-tag>
              </p>
              <p><strong>相关作品IP：</strong>{{ currentCoser.relatedWorks }}</p>
            </div>
          </el-col>
        </el-row>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="detailOpen = false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Coser",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // coser表格数据
      coserList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 是否显示详情弹出层
      detailOpen: false,
      // 当前查看的coser详情
      currentCoser: null,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: null,
        cn: null,
        domain: null
      },
      // 表单参数
      form: {},
      // 标签输入
      tagInput: '',
      // 领域选项
      domainOptions: [
        { value: 'game', label: '游戏' },
        { value: 'anime', label: '动漫' },
        { value: 'ancient', label: '古风' },
        { value: 'modern', label: '现代' },
        { value: 'other', label: '其他' }
      ],
      // 星座选项
      zodiacOptions: [
        { value: '白羊座', label: '白羊座' },
        { value: '金牛座', label: '金牛座' },
        { value: '双子座', label: '双子座' },
        { value: '巨蟹座', label: '巨蟹座' },
        { value: '狮子座', label: '狮子座' },
        { value: '处女座', label: '处女座' },
        { value: '天秤座', label: '天秤座' },
        { value: '天蝎座', label: '天蝎座' },
        { value: '射手座', label: '射手座' },
        { value: '摩羯座', label: '摩羯座' },
        { value: '水瓶座', label: '水瓶座' },
        { value: '双鱼座', label: '双鱼座' }
      ],
      // 表单校验
      rules: {
        nickname: [
          { required: true, message: "昵称不能为空", trigger: "blur" }
        ],
        cn: [
          { required: true, message: "cn不能为空", trigger: "blur" }
        ],
        type: [
          { required: true, message: "类型不能为空", trigger: "blur" }
        ]
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询coser列表 */
    getList() {
      this.loading = true;
      // 模拟数据，实际应该调用API
      setTimeout(() => {
        this.coserList = [
          {
            id: 1,
            nickname: "鹿鹿子",
            cn: "luzi",
            type: "游戏coser",
            age: null,
            birthday: "1998.06.18",
            location: "上海",
            zodiac: "巨蟹座",
            domain: "game",
            expertise: "古风/游戏/动漫角色还原",
            tags: ["原神", "咒术回战", "古风cos", "女装大佬", "高还原度"],
            relatedWorks: "原神，剑网三，第五人格",
            avatar: "https://via.placeholder.com/200x200/4CAF50/white?text=鹿鹿子",
            rating: 4.5
          },
          {
            id: 2,
            nickname: "小樱",
            cn: "sakura",
            type: "动漫coser",
            age: "22",
            birthday: "2001.03.15",
            location: "北京",
            zodiac: "双鱼座",
            domain: "anime",
            expertise: "动漫角色还原/洛丽塔",
            tags: ["火影忍者", "海贼王", "洛丽塔"],
            relatedWorks: "火影忍者，海贼王，魔法少女小樱",
            avatar: "https://via.placeholder.com/200x200/E91E63/white?text=小樱",
            rating: 4.8
          }
        ];
        this.total = 2;
        this.loading = false;
      }, 1000);
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        nickname: null,
        cn: null,
        type: null,
        age: null,
        birthday: null,
        location: null,
        zodiac: null,
        domain: null,
        expertise: null,
        tags: [],
        relatedWorks: null,
        avatar: null,
        rating: 0
      };
      this.tagInput = '';
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加Coser";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      this.form = { ...row };
      this.open = true;
      this.title = "修改Coser";
    },
    /** 详情按钮操作 */
    handleDetail(row) {
      this.currentCoser = row;
      this.detailOpen = true;
    },
    /** 卡片点击跳转操作 */
    handleCardClick(item) {
      console.log(item)
      this.$router.push({
        path: '/user/coser/coserList',
        query: {
          id: item.id,
          name: item.nickname,
          type: item.type,
          age: item.age,
          location: item.location,
          expertise: item.expertise,
          avatar: item.avatar
        }
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            this.$modal.msgSuccess("修改成功");
            this.open = false;
            this.getList();
          } else {
            this.$modal.msgSuccess("新增成功");
            this.open = false;
            this.getList();
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      this.$modal.confirm('是否确认删除coser"' + row.nickname + '"？').then(() => {
        this.$modal.msgSuccess("删除成功");
        this.getList();
      }).catch(() => {});
    },
    // 添加标签
    addTag() {
      if (this.tagInput && this.tagInput.trim()) {
        if (!this.form.tags) {
          this.form.tags = [];
        }
        if (!this.form.tags.includes(this.tagInput.trim())) {
          this.form.tags.push(this.tagInput.trim());
        }
        this.tagInput = '';
      }
    },
    // 删除标签
    removeTag(index) {
      this.form.tags.splice(index, 1);
    },
    // 头像上传前校验
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    }
  }
};
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
}

.coser-card-container {
  margin-top: 20px;
}

.coser-card-col {
  margin-bottom: 20px;
}

.coser-card {
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  position: relative;
  height: 450px;
  
  &:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
  }
  
  .card-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    
    .background-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .background-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.4) 100%);
    }
  }
  
  .card-content-layer {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    height: 100%;
  }
}

.card-header {
  position: relative;
  height: 80px;
  
  .avatar-section {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 60px;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
    border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 2;
    
    .avatar-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  
  .rating-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(255, 255, 255, 0.9);
    padding: 5px 10px;
    border-radius: 20px;
    backdrop-filter: blur(10px);
    z-index: 2;
  }
}

.card-content {
  padding: 15px;
  flex: 1;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  
  .info-item {
    margin-bottom: 8px;
    display: flex;
    align-items: flex-start;
    
    .label {
      font-weight: bold;
      color: #606266;
      min-width: 70px;
      flex-shrink: 0;
    }
    
    .value {
      color: #303133;
      flex: 1;
      word-break: break-all;
    }
    
    .tags-container {
      flex: 1;
      
      .el-tag {
        margin: 2px 4px 2px 0;
      }
    }
  }
}

.card-footer {
  padding: 10px 15px;
  border-top: 1px solid rgba(240, 240, 240, 0.8);
  text-align: center;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  
  .el-button {
    margin: 0 5px;
  }
}

.avatar-uploader {
  text-align: center;
  
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    
    &:hover {
      border-color: #409EFF;
      color: #409EFF;
    }
  }
  
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
    border-radius: 6px;
    object-fit: cover;
  }
}

.tag-list {
  margin-top: 10px;
}

.detail-container {
  .avatar-section-detail {
    text-align: center;
    
    .detail-avatar {
      width: 200px;
      height: 200px;
      border-radius: 8px;
      object-fit: cover;
      margin-bottom: 10px;
    }
    
    .rating-detail {
      background: #f5f5f5;
      padding: 10px;
      border-radius: 20px;
      display: inline-block;
    }
  }
  
  .info-detail {
    h2 {
      color: #303133;
      margin-bottom: 20px;
      border-bottom: 2px solid #409EFF;
      padding-bottom: 10px;
    }
    
    p {
      margin: 10px 0;
      line-height: 1.6;
      
      strong {
        color: #606266;
        display: inline-block;
        min-width: 100px;
      }
    }
  }
}

@media (max-width: 768px) {
  .app-container {
    padding: 10px;
  }
  
  .coser-card {
    .card-header {
      height: 70px;
      
      .avatar-section {
        width: 50px;
        height: 50px;
        top: 8px;
        left: 8px;
      }
      
      .rating-badge {
        font-size: 12px;
        padding: 3px 6px;
      }
    }
    
    .card-content {
      padding: 10px;
      
      .info-item {
        flex-direction: column;
        margin-bottom: 6px;
        
        .label {
          margin-bottom: 2px;
          font-size: 12px;
        }
        
        .value {
          font-size: 12px;
        }
      }
    }
    
    .card-footer {
      padding: 8px;
      
      .el-button {
        padding: 5px 8px;
        font-size: 12px;
      }
    }
  }
  
  .el-form--inline .el-form-item {
    display: block;
    margin-bottom: 10px;
  }
  
  .el-dialog {
    width: 95% !important;
    margin: 5vh auto;
  }
}
</style>